import { View } from "@tarojs/components";
import { useState } from "react";
import { styled } from "@linaria/react";
import { useCallContainerGet } from "@/tools/useCallContainer";
import Taro from "@tarojs/taro";  

import TabBar from '@/components/TabBar';
import TaroMap from '@/components/Mapss';
import DishItem from "../restaurant/components/DishItem";

export default function collections() {
    const [{ collectDishes }] = useCallContainerGet(
        "/collections/users/_open_id"
    );
    const [{ _open_id }] = useCallContainerGet (
        "/id"
    )

    const [currentTab, setCurrentTab] = useState<number>(2);

    const handleTabClick = (index: number) => {
        setCurrentTab(index);
        if (index === 0) {
            Taro.redirectTo({ url: '../index/index' });
            //Taro.navigateTo({ url: '../index/index' });
        } else if (index === 1) {
            Taro.redirectTo({ url: '../GetMapp/index' });
            //Taro.navigateTo({ url: "../restaurant/index?id=1" });
        }
        else if (index === 2) {
            //Taro.navigateTo({ url: "../restaurant/index?id=1" });
        }
        else if (index === 3) {
            Taro.redirectTo({ url: "../Users/index" });
            //Taro.navigateTo({ url: "../collections/index" });
        }
        // 添加其他导航项的处理逻辑
    };
    const tabList = [
    { title: '食堂', iconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/home1.png', selectedIconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/home2.png' },
    { title: '地图', iconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/map_marker_icon.svg' , selectedIconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/map_marker_icon.svg'},
    { title: '收藏', iconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/collection1.png', selectedIconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/tabbar/collection2.png'},
    
    { title: '用户', iconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/user_circle_light_icon.png', selectedIconPath: 'cloud://prod-0g6virbea3062996.7072-prod-0g6virbea3062996-1322280255/8726547_user_circle_icon.png'},
    
    // 添加其他的导航项
    ];

    return (
        <View style={{ paddingTop: "10px" ,flexDirection:"column", height:"100%"}}>
        <DishItemList>
              {(collectDishes??[]).map((dish1) => (
                <View style={{marginTop:"12px", paddingLeft:"10px", border:"2px solid #dadada", borderRadius:"10px", boxShadow:"0 0 4px rgba(0,0,0,.35)"}}>
                    <DishItem dish={dish1} updateInfo={()=>{}}/>
                </View>
              ))} 
        </DishItemList>
        <View className="container"> 
            <TabBar tabList={tabList} current={currentTab} onClick={handleTabClick} />
        </View>
        {/* <View style={{ width: '100%', height: '400px' }}>
            <TaroMap/>
        </View> */}
        
    </View>
    );
}

const DishItemList = styled(View)`
  width: 94%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
`;